<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <!-- 主表单区域 -->
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12" >
            <a-form-model-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="patternId">
              <a-input v-model="model.patternId" disabled placeholder="请输入单据编号" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" hidden  >
            <a-form-model-item  label="审批流程"  :labelCol="labelCol" :wrapperCol="wrapperCol" prop="flowFlag">
              <j-dict-select-tag
                type="list"
                v-model="model.flowFlag"
                dictCode="pattern_flow_flag"
                placeholder="请选择审批流程"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6" >
            <a-form-model-item label="物料编码" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="materialCode">
              <j-popup
                @input="inputMaterialCode"
                v-model="model.materialCode"
                placeholder="请输入物料编码"
                code="crmMaterialCode"
                org-fields="code"
                dest-fields="materialCode"
                :field="getPopupField('materialCode')"></j-popup>
            </a-form-model-item>
          </a-col>
          <a-col :span="6" >
            <a-form-model-item label="物料名称" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="materialName">
              <a-input v-model="model.materialName" disabled  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="6" >
            <a-form-model-item label="规格型号" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="spec">
              <a-input v-model="model.spec" disabled  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="6" >
            <a-form-model-item label="单位" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="unit">
              <j-dict-select-tag
                type="list"
                v-model="model.unit"
                disabled
                dictCode="ji_unit"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" >
            <a-form-model-item label="改版时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="revisionTime">
              <j-date placeholder="请选择改版时间" v-model="model.revisionTime" style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row >
          <a-col :span="14" >
            <a-card class="mycard">
              <a-row :gutter="10">
                <a-col :span="4">
                  <h4>版样代码:</h4>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="4" >
                  <a-form-model-item label="标识      " :labelCol="labelCol3" :wrapperCol="wrapperCol3" prop="sign">
                    <a-input @change="inputByCode" v-model="model.sign"  ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="4" >
                  <a-form-model-item label="年份(2位)  " :labelCol="labelCol3" :wrapperCol="wrapperCol3" prop="year">
                    <a-input @change="inputByCode"v-model="model.year"  ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="4" >
                  <a-form-model-item label="排产单号(4位)" :labelCol="labelCol3" :wrapperCol="wrapperCol3" prop="productionOrder">
                    <a-input @change="inputByCode"v-model="model.productionOrder"  ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="4" >
                  <a-form-model-item label="包装形式(1位)" :labelCol="labelCol3" :wrapperCol="wrapperCol3" prop="packagingForm">
                    <a-input @change="inputByCode"v-model="model.packagingForm"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="4" >
                  <a-form-model-item label="包装规格(2位)" :labelCol="labelCol3" :wrapperCol="wrapperCol3" prop="packagingSpecifications">
                    <a-input @change="inputByCode"v-model="model.packagingSpecifications" ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="4" >
                  <a-form-model-item label="版本号(2位)" :labelCol="labelCol3" :wrapperCol="wrapperCol3" prop="version">
                    <a-input @change="inputByCode"v-model="model.version"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24" >
                  <a-form-model-item :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 },}" prop="year">
                    <a-input v-model="model.bycode"  disabled ></a-input>
                  </a-form-model-item>
                </a-col>

                <a-col :span="24" >
                  <a-form-model-item label="改版内容" :labelCol="labelCol" :wrapperCol="{xs: { span: 24 },sm: { span: 24 },}" prop="revisedContent">
                    <a-textarea v-model="model.revisedContent" :rows="5" allow-clear showCount ></a-textarea>
                  </a-form-model-item>
                </a-col>
              </a-row>


            </a-card>
          </a-col>
          <a-col :span="10" >
            <a-card class="mycard" style="background-color:#00fdfe;font-size:14px">
              <a-row>
                <a-col :span="24" >
                  编码规则：例：GM 20 0001 1 01 00
                </a-col>
                <a-col :span="24" >
                  GM......国贸出口(GN-国内OEM，TS-公司自有品牌，PZ-加信氏，HK-汉高，等)
                </a-col>
                <a-col :span="24" >
                  20......年份
                </a-col>
                <a-col :span="24" >
                  0001......排产单号(新产品)
                </a-col>
                <a-col :span="24" >
                  1......包装形式(1指内包装，2是指外包装)
                </a-col>
                <a-col :span="24" >
                  01......指本订单中的包装规格(01指内包装第一种，02指内包装第二种，以此类推)
                </a-col>
                <a-col :span="24" >
                  00......版本号(新版就是00，如改版就是01,02，…依次类推)
                </a-col>
                <a-col :span="24" >
                 注：
                </a-col>
                <a-col :span="24" >
                  1：01...包装规格的规定可以按照由小到大，或者由大到小来规定，便于记录
                </a-col>
                <a-col :span="24" >
                  2：00...修改版本时，责任人或者部门要做好改版的时间和内容，便于追潮
                </a-col>
                <a-col :span="24" >
                  3：代码定好后，除版本号可以修改外，其余不可修改
                </a-col>
                <a-col :span="24" >
                  4：后续订单记录代码(可到数据库查询)即可
                </a-col>
              </a-row>
            </a-card>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
      <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="版样列表" :key="refKeys[0]" :forceRender="true">
        <j-vxe-table
          keep-source
          :ref="refKeys[0]"
          :loading="crmPatternManagementFileTable.loading"
          :columns="crmPatternManagementFileTable.columns"
          :dataSource="crmPatternManagementFileTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :toolbar="true"
          >
        <template v-slot:action="{ row }">
          <a @click="handlePreviewReviewDesFiles(row)">预览</a>
        </template>
        </j-vxe-table>
      </a-tab-pane>
    </a-tabs>
  </a-spin>
</template>

<script>

import {getAction, putAction} from '@/api/manage'
  import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
  import { JVXETypes } from '@/components/jeecg/JVxeTable'
  import { getRefPromise,VALIDATE_FAILED} from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
  import { validateDuplicateValue } from '@/utils/util'
import { FilePreview } from '@/utils/tslCommon'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JFormContainer from '@comp/jeecg/JFormContainer.vue'

  export default {
    name: 'CrmPatternManagementForm',
    mixins: [JVxeTableModelMixin,JeecgListMixin],
    components: {
      JFormContainer,
    },
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 18 },
        },
        labelCol3: {
          xs: { span: 24 },
          sm: { span: 22 },
        },
        wrapperCol3: {
          xs: { span: 24 },
          sm: { span: 22 },
        },
        model:{
          flowFlag:1,
          sign:'',
          year:'',
          productionOrder:'',
          packagingForm:'',
          packagingSpecifications:'',
          version:''
         },
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
          flowFlag: [{ required: true, message: '请选择审批流程!' }],
          materialCode: [{ required: true, message: '请输入物料编码!' }],
        },
        refKeys: ['crmPatternManagementFile', ],
        tableKeys:['crmPatternManagementFile', ],
        activeKey: 'crmPatternManagementFile',
        // 版样管理附件
        crmPatternManagementFileTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '附件',
              key: 'files',
              type: JVXETypes.file,
              token:true,
              // action:window._CONFIG['domianURL']+'/sys/common/upload',
              responseName:"message",
              defaultValue:'',
              // validateRules: [{ required: true, message: '${title}不能为空' }],
            },
            {
              title: '操作',
              key: 'action',
              type: JVXETypes.slot,
              fixed: 'right',
              minWidth: '100px',
              align: 'center',
              slotName: 'action',
            },
          ]
        },
        url: {
          list:"/pattern/crmPatternManagement/list",
          add: "/pattern/crmPatternManagement/add",
          edit: "/pattern/crmPatternManagement/edit",
          queryById: "/pattern/crmPatternManagement/queryById",
          crmPatternManagementFile: {
            list: '/pattern/crmPatternManagement/queryCrmPatternManagementFileByMainId'
          },
          goodsList:"/base/erpGoods/list"
        }
      }
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      customFormData: {
        type: Object,
        default: () => {
          return {}
        },
        required: false,
      },
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
    if (this.customFormData != null && this.customFormData.id) {
      this.model = this.customFormData
      this.editAfter() //现在子表内容需要
    }
    },
    methods: {
      handlePreviewReviewDesFiles(row) {
        if (row && row.files) {
          FilePreview(row.files)
        }
      },

      nullToEmptyString(value) {
        return value === null ? '' : value;
      },
      inputByCode(){
        this.model.bycode=this.nullToEmptyString(this.nullToEmptyString(this.model.sign)+this.nullToEmptyString(this.model.year)+this.nullToEmptyString(this.model.productionOrder)+this.nullToEmptyString(this.model.packagingForm)+this.nullToEmptyString(this.model.packagingSpecifications)+this.nullToEmptyString(this.model.version))
      },
      inputMaterialCode(){
        console.log("到这了")
        getAction(this.url.goodsList,{code:this.model.materialCode}).then((res)=>{
          if(res.code==200&&res.result.records.length>0){
            this.$set(this.model,"materialName",res.result.records[0].name)
            this.$set(this.model,"spec",res.result.records[0].noneSpec)
            this.$set(this.model,"unit",res.result.records[0].meUnit)
          }
          else{
            this.model.materialName = ''
            this.model.spec = ''
            this.model.unit = ''
          }
        })
      },
      getSequenceNum() {
        let url = '/sys/fillRule/executeRuleByCode/parrent_management'
        putAction(url, {}).then((res) => {
          // 执行成功，获取返回的值，并赋到页面上
          if (res.success) {
            this.model.patternId = res.result
            this.$forceUpdate();
          }
        })
      },
/*
      add() {
        this.eachAllTable((item) => {
          //update-begin-author:taoyan date:20210315 for: 一对多jvex 默认几行不好使了 LOWCOD-1349
          setTimeout(()=>{
            item.addRows()
          }, 30)
          //update-end-author:taoyan date:20210315 for: 一对多jvex 默认几行不好使了 LOWCOD-1349
        })
        if (typeof this.addAfter === 'function') this.addAfter(this.model)

        this.crmPatternManagementFileTable.dataSource=[]

        this.getSequenceNum()
      },
*/
      addBefore(){
        this.crmPatternManagementFileTable.dataSource=[]

        this.getSequenceNum()
      },

      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        this.inputByCode()
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.crmPatternManagementFile.list, params, this.crmPatternManagementFileTable)
        }
      },
      //校验所有一对一子表表单
        validateSubForm(allValues){
            return new Promise((resolve,reject)=>{
              Promise.all([
              ]).then(() => {
                resolve(allValues)
              }).catch(e => {
                if (e.error === VALIDATE_FAILED) {
                  // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
                  this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
                } else {
                  console.error(e)
                }
              })
            })
        },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)
        return {
          ...main, // 展开
          crmPatternManagementFileList: allValues.tablesValue[0].tableData,
        }
      },
      validateError(msg){
        this.$message.error(msg)
      },

    }
  }
</script>

<style scoped>
</style>